<template>
  <div class="container">
    <div class="title">数字水运</div>
    <div class="map-content">
      <OlArc></OlArc>
    </div>
    <div class="content">
      <div class="item-title">全省概况</div>
      <div class="count-list">
        <div class="count-item first-color">
          <div class="count-name">全省航道总里程(公里)</div>
          <div class="count-value">{{ optionData.hdMile }}</div>
          <img src="../../static/images/nw-one-icon.png" alt="">
        </div>
        <div class="count-item second-color">
          <div class="count-name">内河等级桥梁总数(座)</div>
          <div class="count-value">{{ optionData.bgNum }}</div>
          <img src="../../static/images/nw-two-icon.png" alt="">
        </div>
        <div class="count-item first-color">
          <div class="count-name">船闸总数(座)</div>
          <div class="count-value">{{ optionData.czNum }}</div>
          <img src="../../static/images/nw-three-icon.png" alt="">
        </div>
        <div class="count-item second-color">
          <div class="count-name">水运货量(万吨)</div>
          <div class="count-value">{{ optionData.waterGoods }}</div>
          <img src="../../static/images/nw-four-icon.png" alt="">
        </div>
        <div class="count-item first-color">
          <div class="count-name">港口货物吞吐量(万吨)</div>
          <div class="count-value">{{ optionData.portGoods }}</div>
          <img src="../../static/images/nw-five-icon.png" alt="">
        </div>
        <div class="count-item second-color">
          <div class="count-name">十万吨级以上港口数(座)</div>
          <div class="count-value">{{ optionData.tenTonsAbovePort }}</div>
          <img src="../../static/images/nw-five-icon.png" alt="">
        </div>
        <div class="count-item first-color">
          <div class="count-name">港口泊位数(个)</div>
          <div class="count-value">{{ optionData.berth }}</div>
          <img src="../../static/images/nw-four-icon.png" alt="">
        </div>
        <div class="count-item second-color">
          <div class="count-name">全省营运船舶(艘)</div>
          <div class="count-value">{{ optionData.provinceAllShip }}</div>
          <img src="../../static/images/nw-three-icon.png" alt="">
        </div>
      </div>
    </div>
    <div class="content">
      <div class="item-title">应用专栏</div>
      <div class="list">
        <div class="item">
          <router-link to="/wisdomChannel">
            <div class="icon">
              <img src="../../static/images/column-one.png" alt="">
            </div>
            <div class="name">智慧航道</div>
          </router-link>
        </div>
        <div class="item">
          <!-- <div class="icon">
            <img src="../../static/images/column-five.png" alt="">
          </div>
          <div class="name">数字港口</div> -->
          <a :href="linkSettings.digitalPort">
            <div class="icon">
              <img src="../../static/images/column-five.png" alt="">
            </div> 
            <div class="name">数字港口</div>
          </a>
        </div> 
        <div class="item">
          <a :href="linkSettings.webwaterii">
          <div class="icon">
            <img src="../../static/images/column-six.png" alt="">
          </div>
          <div class="name">数字航运</div>
          </a>
        </div> 
        <div class="item">
          <a :href="linkSettings.bridgeArea">
            <div class="icon">
              <img src="../../static/images/column-two.png" alt="">
            </div>
            <div class="name">水上桥区管控</div>
          </a>
        </div>
        <div class="item">
          <a :href="linkSettings.gateDam">
            <div class="icon">
              <img src="../../static/images/column-three.png" alt="">
            </div> 
            <div class="name">闸坝智能调度<br>与安全监测</div>
          </a>
        </div>
        <div class="item">
          <a href="http://210.76.76.41/strait-gdport/small-screen/main/#/?token=10b4040ca79c4661b8ace01a203c516e">
            <div class="icon">
              <img src="../../static/images/column-four.png" alt="">
            </div>
            <div class="name">琼州海峡保畅<br>通系统联动</div>
          </a>
        </div>         
      </div>
    </div>
    <div style="text-align: center;padding: 5px 0;color: #8C8C8C;">
      <div style="margin-bottom: 5px;">广东省交通运输厅</div>
      <div style="margin-bottom: 5px;">数据来源：广东省航道事务中心</div>
    </div>   
  </div>
</template>
<script setup>
  import { ref, onMounted } from "vue";
  import { useRouter } from "vue-router";
  // 引入地图
  import OlArc from "./olArcIndex.vue";
  // 引入api
  import {
    provinceSit,
  } from "../../utils/apis";

  import { api as viewerApi } from 'v-viewer'
  const router = useRouter();

  import { showToast } from "vant";

  const optionData = ref({});
  const getProvinceWaterwayDataFn = () => {
    return new Promise((resolve, reject) => {
      provinceSit().then((res) => {
        if(res.code === 200 && res.data){
          resolve(res.data);
        }      
      });
    })
  };

  const linkSettings = ref({});
  const getLinkSettings = () => {
    let accessToken = sessionStorage.getItem('access_token');
    let settings = {
      bridgeArea: '/traffic-channel/bridge/small-screen/#/bridgeAreaControl?access_token=' + accessToken,
      gateDam: '/traffic-channel/lock/small-screen/#/gateDam?access_token=' + accessToken,
      digitalPort: 'http://210.76.76.41/digital-port/small-screen/main/#/?token=' + accessToken,
      webwaterii: 'http://210.76.77.102:181/webwaterii/small-screen/#/?token=' + accessToken,
    }
    if (location.href.includes('pre-yth')) {
      settings.bridgeArea = '/traffic-channel/pre-yth/bridge/small-screen/#/bridgeAreaControl?access_token=' + accessToken;
      settings.gateDam = '/traffic-channel/pre-yth/lock/small-screen/#/gateDam?access_token=' + accessToken;
    }
    return settings;
  };
  onMounted(async() => {
    document.title = "数字水运";
    optionData.value = await getProvinceWaterwayDataFn();
    linkSettings.value = getLinkSettings();
    if(sessionStorage.getItem("watermarkTxt")){
      //加水印
      watermark.init({ 
        watermark_x: -30, // 水印起始位置x轴坐标
        watermark_y: -20, // 水印起始位置Y轴坐标
        watermark_x_space: 20, // 水印x轴间隔
        watermark_y_space: 80, // 水印y轴间隔
        watermark_alpha: 0.07, // 水印透明度
        watermark_fontsize: '14px', // 水印字体大小
        watermark_width: 100, // 水印宽度
        watermark_height: 30,
        watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
        watermark_angle: 25, // 水印倾斜度数
        watermark_rows: 0, // 水印行数
        watermark_cols: 0, // 水印列数
        watermark_font: '微软雅黑', // 水印字体
        watermark_color: 'black', // 水印字体颜色 
      });
    }
  });
</script>
<style lang="scss" scoped>
  .container{
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;  
    padding: 0;
    margin: 0;  
    box-sizing: content-box;
    position: relative;
    .title{
      height: 68px;
      background-image:url('../../static/images/number-water-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: 800; 
      color: #FFFFFF;   
    }
    .map-content{
      margin: 16px 0px;  
      padding: 16px 20px;
      background-color: #FFFFFF;
      box-sizing: content-box;         
    }
    .content{      
      margin: 16px 0px;
      background: #FFFFFF;
      .item-title{  
        display: flex;    
        justify-content: space-between;
        align-items: center;  
        color: #2A8BFD;
        font-size: 18px;
        font-weight: 600;
        padding: 10px 0px 10px 28px;
        position: relative;   
        // border-bottom: 1px dotted #ccc;  
        .more{
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: 500;
          color: #2A8BFD;
          margin-right: 16px;
          img{
            width: 8px;
            height: 12px;
            padding-left: 5px;
          }
        }   
      }
      .item-title::before{
        content: '';
        background-color: #2A8BFD;
        position: absolute;
        top: 50%;
        left: 4%;
        height: 17px;
        width: 4px;
        transform: translateY(-50%);
      }
      .count-list{
        display: flex;
        flex-wrap: wrap;
        margin: 0px 12px;
        padding-bottom: 16px;
        .count-item{
          width: 48%;
          padding: 16px 0;
          margin: 1%;
          position: relative;
          .count-name{
            font-weight: 400;
            font-size: 12px;
            color: #595959;
            padding-left: 16px;
          }
          .count-value{
            font-weight: bold;
            font-size: 21px;
            color: #262626;
            padding: 4px 0px 0px 16px;
          } 
          img{
            position: absolute;
            right: 0;
            bottom: 0;
            width: 40px;
            height: 32px;
          }
        }
        .first-color{
          background: rgba(0,144,255,0.06);
        }
        .second-color{
          background: rgba(78,217,160,0.06);
        }
      }
      .list{
        display: flex;
        flex-wrap: wrap;
        margin: 10px;
        .item{
          width: 33.33%;
          height: 100px;
          display: flex;
          flex-direction: column;
          align-items: center;
          // justify-content: center;          
          box-sizing: border-box;
          a {
            text-align: -webkit-center;
          }
          .icon{
            width: 42px;
            height: 42px; 
            img{
              width: 100%;
              height: 100%;
            }           
          }
          .name{
            color: #000;
            font-size: 12px;
            font-weight: 500;
            margin-top: 10px;
            text-align: center;
          }
        }
      }
    }        
  }
</style>